<script>
import { User, Lock } from '@element-plus/icons-vue'

export default {
    name: "Login",
    data() {
        return {
            loginFormInfo: {
                userName: "",
                password: "",
            },
            loginFormRules: {
                userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
                password: [{ required: true, message: "请输入密码", trigger: "blur" }],
            },
            loading: false,
            redirect: undefined,
        };
    },
    methods: {
        handleLogin() {
            this.$router.push("/home");
        },
    },
};
</script>

<template>
    <div class="login-container">
        <el-form class="login-form" ref="loginFormRef" :model="loginFormInfo" :rules="loginFormRules" auto-complete="on"
            label-position="left">
            <div class="title-container">
                <h3 class="title">霞智科技有限公司</h3>
            </div>

            <el-form-item prop="userName">
                <el-input v-model="loginFormInfo.userName" placeholder="用户名" name="userName" type="text" tabindex="1"
                    auto-complete="on">
                    <template #prefix>
                        <el-icon class="el-input__icon">
                            <User />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>

            <el-form-item prop="password">
                <el-input v-model="loginFormInfo.password" placeholder="密码" name="password" tabindex="2"
                    auto-complete="on" show-password>
                    <template #prefix>
                        <el-icon class="el-input__icon">
                            <Lock />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>

            <el-button :loading="loading" type="primary" style="width: 100%; margin-bottom: 30px"
                @click="handleLogin">登录</el-button>
        </el-form>
    </div>
</template>

<style lang="scss" scoped>
.login-container {
    min-height: 100%;
    width: 100%;
    background-image: url("../assets/image/login_back.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;

    .login-form {
        position: relative;
        width: 520px;
        max-width: 100%;
        padding: 160px 35px 0;
        margin: 0 auto;
        overflow: hidden;

        color: #000;
    }

    .title-container {
        position: relative;

        .title {
            font-size: 26px;
            color: #000;
            margin: 0px auto 40px auto;
            text-align: center;
            font-weight: bold;
        }
    }
}
</style>
